<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Factories</title>
</head>
<body>

<!-- Target Container -->
<div id="react-container"></div>

<!-- React Library & React DOM-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script>

    const { render } = ReactDOM

    const IngredientsList = ({ list }) =>
        React.createElement('ul', null,
            list.map((ingredient, i) =>
                React.createElement('li', {key: i}, ingredient)
            )
    )

    const Ingredients = React.createFactory(IngredientsList)

    const list = [
        "1 lb salmon",
        "1 cup Pine Nuts",
        "2 cups Butter Lettuce",
        "1 Yellow Squash",
        "1/2 cup Olive Oil",
        "3 cloves of Garlic"
    ]

    render(
        Ingredients({list}),
        document.getElementById('react-container')
    )

</script>

</body>
</html>
